<template>
  <view class="benefits-container">
    <!-- 标题 -->
    <view class="header">
      <view class="info">
        <text class="title">编辑公司福利待遇</text>
        <text class="progress">{{ progressText }}</text> <!-- 动态显示占比 -->
      </view>
      <text class="description">选择公司提供福利信息，以吸引更多求职者</text>
    </view>

    <!-- 福利选项 -->
    <view class="benefits-list">
      <view
        class="benefit-item"
        :class="{ selected: selectedBenefits.includes(item) }"
        v-for="(item, index) in benefitsOptions"
        :key="index"
        @click="toggleBenefit(item)"
      >
        <text class="benefit-name">{{ item }}</text>
      </view>
    </view>

    <!-- 已选福利 -->
    <view class="selected-benefits" v-if="selectedBenefits.length > 0">
      <text class="selected-title">已选</text>
      <view class="selected-list">
        <view
          class="selected-item"
          v-for="(item, index) in selectedBenefits"
          :key="index"
          @click="removeBenefit(item)"
        >
          <text class="selected-name">{{ item }}</text>
          <uni-icons type="closeempty" size="16" color="#2B2ED1"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button-container">
      <button class="save-button" @click="saveBenefits">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 福利选项
      benefitsOptions: ["五险一金", "底薪加提成", "周末双休", "工龄奖"],
      // 已选福利
      selectedBenefits: [],
    };
  },
  computed: {
    // 计算占比文本
    progressText() {
      const selectedCount = this.selectedBenefits.length;
      const totalCount = this.benefitsOptions.length;
      return `${selectedCount}/${totalCount}`;
    },
  },
  methods: {
    // 切换福利选择
    toggleBenefit(benefit) {
      if (this.selectedBenefits.includes(benefit)) {
        this.selectedBenefits = this.selectedBenefits.filter(
          (item) => item !== benefit
        );
      } else {
        this.selectedBenefits.push(benefit);
      }
    },
    // 移除已选福利
    removeBenefit(benefit) {
      this.selectedBenefits = this.selectedBenefits.filter(
        (item) => item !== benefit
      );
    },
    // 保存福利
    saveBenefits() {
      if (this.selectedBenefits.length === 0) {
        uni.showToast({
          title: "请选择至少一项福利",
          icon: "none",
        });
        return;
      }

      // 返回上一页并传递数据
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit("updateBenefits", this.selectedBenefits);

      uni.navigateBack();
    },
  },
};
</script>

<style scoped>
.benefits-container {
  padding: 20px;
  height: 884px;
  background-color: #fff;
}

.header {
  margin-bottom: 20px;
}

.info{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.title {
  color: #000;
  font-size: 20px;
  margin-bottom: 10px;
}

.progress {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.description {
	display: block;
  font-size: 14px;
  color: #666;
}

.benefits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 选项之间的间距 */
  margin-bottom: 20px;
}

.benefit-item {
  flex: 1;
    width: calc(25% - 5px); /* 每行四个选项 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 4px;
    background: #ECECEC;
}

.benefit-item.selected {
  background-color: #CACCFF; /* 选中时的背景颜色 */
  color: #333; /* 选中时的文字颜色 */
}

.benefit-name {
  font-size: 12px;
  color: #333; /* 继承父元素的颜色 */
}

.selected-benefits {
  position: fixed;
  bottom: 80px; /* 位于保存按钮上方 */
  left: 20px;
  right: 20px;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
}

.selected-title {
  font-size: 16px;
  color: #151515;
}

.selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 已选项之间的间距 */
}

.selected-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 2px;
  cursor: pointer;
  background-color: #CACCFF;
}

.selected-name {
  font-size: 14px;
  color: #2B2ED1;
  margin-right: 5px;
}

.save-button-container {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px 20px;
}

.save-button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  border-radius: 32px;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
}
</style>